@import './themeConfig.scss';

.el-switch {
    &.el-switch {
        height: 16px !important;
        line-height: 16px;
    }

    // 开启样式
    &.el-switch.is-checked .el-switch__core {
        border-color: var(--app-primary-base);
        background-color: var(--app-primary-base);
    }
}

.el-button {
    border-radius: 8px;
    color: var(--ui-variant-btn-color);
    background-color: #1d385e;
    border: 1px solid var(--ui-border-color-base);

    &.el-button:focus,
    &:hover {
        color: var(--ui-variant-btn-color);
        background-color: var(--ui-btn-primary-color-hover);
        border-color: var(--ui-btn-primary-color-hover);
    }
}

.el-button--primary {
    background-color: var(--app-primary-base);
}

.el-button--info {
    color: var(--ui-text-color);
    background-color: var(--ui-component-background);
    border: 1px solid var(--ui-border-color-base);

    &.el-button:focus {
        background-color: var(--ui-component-background);
        border-color: var(--ui-input-hover-border-color);
    }

    &:hover {
        background-color: var(--ui-component-background);
        border-color: var(--ui-input-hover-border-color);
    }
}

.el-button--text {
    color: var(--app-primary-base);
    background-color: transparent;
    background: transparent;
    border: none;

    &:hover,
    &:active,
    &:focus {
        color: var(--app-primary-base) !important;
        opacity: 0.8;
        background-color: transparent !important;
        background: transparent !important;
        border: none;
    }
}

.el-select {
    & .el-input__inner {
        color: var(--ui-text-color);
        border: 1px solid var(--ui-variant-btn-border-color);
        background-color: var(--ui-input-bg);
        border-radius: 8px;
    }

    &.el-select:hover .el-input__inner,
    &.el-select .el-input.is-focus .el-input__inner,
    &.el-select .el-input__inner:focus {
        border-color: var(--ui-input-hover-border-color);
        background-color: var(--ui-input-bg);
        border-radius: 8px;

    }

    &.el-select .el-input.is-disabled .el-input__inner:hover,
    & .el-input.is-disabled .el-input__inner {
        color: var(--app-text-fg-low);
        background-color: var(--ui-input-disabled-bg);
        border-color: var(--ui-border-color-base);
    }
}

.el-select-dropdown .el-select-dropdown__item {
    border-radius: 5px;
    margin: 0 5px;
}

.el-select .el-input.is-focus .el-input__inner {
    border-color: var(--app-primary-base);
}

.el-select-group__wrap:not(:last-of-type) {
    padding-bottom: 4px;

    &::after {
        height: 0;
    }
}

.el-cascader {
    & .el-input__inner {
        color: var(--ui-text-color);
        border: 1px solid var(--ui-variant-btn-border-color);
        background-color: var(--ui-input-bg);
        border-radius: 8px;
    }

    & .el-input__inner:hover,
    & .el-input.is-focus .el-input__inner,
    & .el-input__inner:focus,
    &:not(.is-disabled):hover .el-input__inner {
        border-color: var(--ui-input-hover-border-color);
        background-color: var(--ui-input-bg);
        border-radius: 8px;

    }
}

.el-cascader__dropdown {
    border: 1px solid var(--ui-border-color-base);
    background: var(--ui-dropdown-menu-bg);
    background-color: var(--ui-dropdown-menu-bg);

    .el-cascader-menu {
        border-right: 1px solid var(--ui-border-color-base);
    }

    .el-cascader-node:not(.is-disabled):hover,
    .el-cascader-node:not(.is-disabled):focus {
        background: var(--ui-item-hover-bg);
    }

    .el-cascader-node.in-active-path,
    .el-cascader-node.is-selectable.in-checked-path,
    .el-cascader-node.is-active {
        color: var(--app-primary-base);
    }

    .el-cascader-node {
        color: var(--ui-text-color);
    }

    .el-cascader-node.is-disabled {
        color: var(--ui-breadcrumb-base-color);
    }
}

.el-input,
.el-textarea,
.el-input--medium {

    & .el-input__inner,
    & .el-textarea__inner {
        color: var(--ui-text-color);
        border: 1px solid var(--ui-variant-btn-border-color);
        background-color: var(--ui-input-bg);
        background: var(--ui-input-bg);
        border-radius: 8px;
    }



    & .el-input__inner:hover,
    & .el-input__inner:focus,
    & .el-textarea__inner:hover,
    & .el-textarea__inner:focus {
        border-color: var(--ui-input-hover-border-color);
        background-color: var(--ui-input-bg);
        border-radius: 8px;
    }


    .el-icon-search:before {
        color: var(--ui-text-color);
        font-weight: bold;
    }

    &.el-input.is-disabled .el-input__inner,
    &.el-textarea.is-disabled .el-textarea__inner {
        color: var(--app-text-fg-low);
        background-color: var(--ui-input-disabled-bg);
        border-color: var(--ui-border-color-base);
    }
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
    color: var(--app-text-fg-low) !important;
}

.el-input-number {
    &.is-controls-right .el-input-number__decrease {
        border-left: 1px solid var(--ui-variant-btn-border-color);
        border-bottom-right-radius: 8px;

        &:hover {
            color: var(--ui-text-color);
        }

        &:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
            border-color: var(--ui-variant-btn-border-color);
        }
    }

    &.is-controls-right .el-input-number__increase {
        border-bottom: 1px solid var(--ui-variant-btn-border-color);
        border-left: 1px solid var(--ui-variant-btn-border-color);
        border-top-right-radius: 8px;

        &:hover {
            color: var(--ui-text-color);
        }

        &:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
            border-color: var(--ui-variant-btn-border-color);
        }
    }

    .el-input-number__increase,
    .el-input-number__decrease {
        background-color: transparent;
        border-color: var(--ui-variant-btn-border-color);

        &:hover {
            color: var(--ui-text-color);
        }
    }

    &:not(.is-disabled):hover .el-input__inner {
        border-color: var(--ui-input-hover-border-color) !important;
    }

    &.is-controls-right .el-input__inner {
        text-align: left;
    }
}

.el-input-number.is-disabled .el-input-number__increase,
.el-input-number.is-disabled .el-input-number__decrease {
    border-color: var(--ui-variant-btn-border-color);
    color: var(--app-text-fg-low);
}

.el-upload:focus {
    color: var(--ui-text-color);
}

.el-upload-dragger {
    background-color: transparent;
}

.el-divider {
    clear: both;
    width: 100%;
    min-width: 100%;
    margin: 24px 0;
    display: flex;
    box-sizing: border-box;
    color: var(--ui-text-color);
    font-size: 14px;
    font-variant: tabular-nums;
    border-top: 1px solid var(--ui-menu-item-active-bg);
    padding: 0;
    list-style: none;
    margin: 20px 0;
}

.el-drawer {
    background-color: var(--app-nav-bg);
    border-radius: 10px;
}

.el-popover {
    color: var(--ui-text-color);
    min-width: 90px;
    padding: 4px 0;
    text-align: center;
    border: 1px solid var(--ui-border-color-base);
    background: var(--ui-dropdown-menu-bg);
    background-color: var(--ui-dropdown-menu-bg);

    & .el-popover__title {
        color: var(--ui-text-color);
        margin-bottom: 0;
        font-size: 14px;
        padding: 5px;
    }

    &.el-popper[x-placement^=top] {
        margin-bottom: 2px;
    }

    &.el-popper[x-placement^=bottom] {
        margin-top: 2px;
    }

    &.el-popper[x-placement^=right] {
        margin-left: 5px;
    }
}

// .el-popper[x-placement^=top] .popper__arrow::after {
//     border-top-color: var(--ui-dropdown-menu-bg);
// }

// .el-popper[x-placement^=top] .popper__arrow {
//     border-top-color: var(--ui-border-color-base);
// }

// .el-popper[x-placement^=bottom] .popper__arrow::after {
//     border-bottom-color: var(--ui-dropdown-menu-bg);
// }

// .el-popper[x-placement^=bottom] .popper__arrow {
//     border-bottom-color: var(--ui-border-color-base);
// }

// .el-popper[x-placement^=right] .popper__arrow::after {
//     border-right-color: var(--ui-dropdown-menu-bg);
// }

// .el-popper[x-placement^=right] .popper__arrow {
//     border-right-color: var(--ui-border-color-base);
// }

.el-popper[x-placement^=top] .popper__arrow::after {
    display: none;
}

.el-popper[x-placement^=top] .popper__arrow {
    display: none;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    display: none;
}

.el-popper[x-placement^=bottom] .popper__arrow {
    display: none;
}

.el-popper[x-placement^=left] .popper__arrow::after {
    display: none;
}

.el-popper[x-placement^=left] .popper__arrow {
    display: none;
}

.el-popper[x-placement^=right] .popper__arrow::after {
    display: none;
}

.el-popper[x-placement^=right] .popper__arrow {
    display: none;
}

.el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    .el-tabs__nav-wrap::after {
        background-color: var(--ui-border-color-split);
    }

    .el-tabs__nav {
        display: flex;
        padding: 8px 0;
    }

    .el-tabs__item {
        gap: 4px;
        display: flex;
        align-items: center;
        line-height: 22px;
        padding: 5px 8px;
        border-radius: 8px;
        font-size: 14px;
        letter-spacing: 2px;
        font-weight: 500;
        color: var(--ui-text-color);
    }

    .el-tabs__item.is-active {
        color: var(--app-primary-base);
        font-weight: bold;
    }

    .el-tabs__active-bar {
        background-color: var(--app-primary-base);
    }

    .el-tabs__content {
        flex-grow: 1;
    }
}

.el-tabs--card {
    .el-tabs__header {
        height: 35px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--ui-border-color-split);

        .el-tabs__nav {
            height: 35px;
            padding: 0;
            border: 1px solid var(--ui-border-color-split);

            .el-tabs__item {
                height: 35px;
                line-height: 35px;
                padding: 0 20px;
                border-radius: 0px;
                border-left: 1px solid var(--ui-border-color-split);
            }

            .el-tabs__item.is-active {
                padding: 0 20px;
            }
        }
    }

    .el-tabs__content {
        .el-tab-pane {
            height: 100%;
        }
    }
}

.el-tree {
    background-color: transparent;
    color: var(--text-color);
    // background-color: var(--app-modal-sider-background-color);
}

/* 未展开的节点 */
.el-tree .el-tree-node__expand-icon:before {
    color: var(--ui-text-color);
}

/* 展开的节点 */
.el-tree .el-tree-node__expand-icon.expanded:before {
    color: var(--ui-text-color);
}

/* 叶子节点（不显示图标） */
.el-tree .is-leaf.el-tree-node__expand-icon::before {
    display: block;
    background: none !important;
    content: "";
    width: 13px;
    height: 12px;
}

.el-tree-node__content {
    height: 33px;
    // margin-bottom: 2px;
    border-bottom: 1px solid var(--ui-component-background);
}

/* 鼠标划过树节点的颜色 */
.el-tree-node__content:hover {
    background: var(--ui-item-hover-bg);
    border-radius: 5px;
}

/* 修改树高亮的样式 */
.el-tree--highlight-current .el-tree-node.is-current.is-focusable>.el-tree-node__content {
    background-color: var(--ui-menu-item-active-bg);
    border-radius: 5px;
}

/* 修改树节点聚焦的样式 */
.el-tree-node:focus>.el-tree-node__content {
    background-color: transparent;
}

/* 原有的箭头 去掉 */
.el-icon svg {
    display: none !important;
    height: 0;
    width: 0;
}

/* 引入的图标（图片）size大小 => 树节点前的预留空间大小 */
.el-tree-node__expand-icon {
    font-size: var(--ui-font-size-lt);
}

/* 图标是否旋转，如果是箭头类型的，可以设置旋转90度。如果是两张图片，则设为0 */
.el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* 未展开的节点 */
.el-tree .el-tree-node__expand-icon:before {
    font-family: FontAwesome;
    content: "\f105";
    color: #667085;
    display: block;
    width: var(--ui-font-size-sm);
    height: var(--ui-font-size-sm);
}

/* 展开的节点 */
.el-tree .el-tree-node__expand-icon.expanded:before {
    font-family: FontAwesome;
    content: "\f107";
    color: #667085;
    display: block;
    width: var(--ui-font-size-sm);
    height: var(--ui-font-size-sm);
    margin-top: 1px;
}

.el-dialog {
    background-color: var(--ui-component-background);
    // background-color: #182642;
    border: 1px solid var(--ui-border-color-base);
    border-radius: 8px;

    & .el-dialog__title {
        color: var(--ui-text-color);
    }

    & .el-dialog__headerbtn:hover {
        background-color: rgba(16, 24, 40, 0.04);

        .el-icon-close:before {
            color: var(--ui-text-color);
        }
    }

    & .el-form--label-top .el-form-item__label {
        color: var(--ui-text-color);
    }



    & .el-upload {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

.el-form {
    .el-form-item__label {
        color: var(--ui-text-color);
        font-weight: 400;
    }

    .el-form-item {
        margin-bottom: 10px;
    }
}

.el-form-item__error {
    padding-top: 0;
}

.el-radio {
    color: var(--ui-text-color);
}

.el-radio__input.is-checked+.el-radio__label {
    color: var(--app-nav-primary-active);
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: var(--app-nav-primary-active);
    background-color: var(--app-nav-primary-active);

}

.el-checkbox .el-checkbox__inner {
    background-color: transparent;
    border: 1px solid var(--ui-text-color);
}

.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: var(--app-nav-primary-active);
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: var(--app-nav-primary-active);
    background-color: var(--app-nav-primary-active);
}

.vue-treeselect__control {
    background-color: transparent;
    background: transparent !important;
    color: var(--ui-text-color) !important;
    border-color: var(--ui-border-color-base) !important;
}

.vue-treeselect--has-value .vue-treeselect__input,
.vue-treeselect__single-value {
    color: var(--ui-text-color) !important;
}

.vue-treeselect__control,
.vue-treeselect--open .vue-treeselect__control,
.vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control {
    color: var(--ui-text-color);
    border: 1px solid var(--ui-variant-btn-border-color);
    background-color: var(--ui-input-bg);
    background: var(--ui-input-bg);
    border-radius: 8px;
}

.vue-treeselect__single-value {
    color: var(--ui-text-color);
}

.vue-treeselect--open-below .vue-treeselect__menu {
    border-top-color: var(--ui-border-color-base);
}

.vue-treeselect--open-above .vue-treeselect__menu {
    border-bottom-color: var(--ui-border-color-base);
}

.vue-treeselect__menu {
    color: var(--ui-text-color);
    background: var(--ui-dropdown-menu-bg);
    border: 1px solid var(--ui-border-color-base);


    .vue-treeselect__option--highlight,
    .vue-treeselect__option--selected:hover {
        background-color: var(--ui-item-hover-bg);
    }

    .vue-treeselect__option--selected {
        background-color: var(--app-nav-bg);
    }
}

.vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover {
    border-color: var(--ui-input-hover-border-color);
    background-color: var(--ui-input-bg);
    border-radius: 8px;
}

.el-tag.el-tag--info {
    border-color: transparent
}

.el-card,
.el-table,
.el-table tr,
.el-table thead,
.el-table thead.is-group th.el-table__cell,
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {

    background-color: transparent;
    // background-color: var(--ui-component-background);
    color: var(--ui-text-color);
    border-color: var(--ui-border-color-base);
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: var(--ui-item-hover-bg);
}

.el-table__body tr.current-row>td.el-table__cell,
.el-table__body tr.selection-row>td.el-table__cell {
    background-color: var(--ui-item-hover-bg);
}

.el-table--border th.el-table__cell.gutter:last-of-type {
    border-bottom: 1px solid var(--ui-border-color-split);
}

.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell,
tbody {
    border-color: var(--ui-border-color-base);
}

// .el-table td.el-table__cell div{
//     padding-left: 10px;
// }

.el-table__expanded-cell {
    background-color: transparent;
}

.el-table::before,
.el-table--group::after,
.el-table--border::after {
    background-color: var(--ui-border-color-base);
}

.el-table--medium .el-table__cell {
    padding: 5px 0;
}

.el-table .cell {
    font-size: var(--ui-font-size-base);
}

.el-checkbox {
    color: var(--ui-text-color);
}

.el-checkbox__inner,
.el-radio-button:first-child .el-radio-button__inner {
    border-color: var(--ui-border-color-base);
}

.el-checkbox__inner:hover {
    border-color: var(--app-primary-base);
}

.el-checkbox__input.is-checked+.el-checkbox__label {
    color: var(--app-primary-base);
}

.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: var(--app-primary-base);
    color: var(--app-primary-base);
}

.el-loading-spinner .path {
    stroke: var(--app-primary-base);
}

.el-loading-mask {
    background-color: var(--ui-component-background);
    opacity: 0.9;
}

.jtyj-dialog-setup {
    &.el-dialog {
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--ui-border-color-base);
    }

    .el-dialog__body {
        padding: 0px;
        max-height: max(calc(100vh - 60px), 640px);
    }

    .el-dialog__header,
    .el-dialog__footer {
        display: none;
    }
}

.jtyj-btn-s {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
    vertical-align: -3px;
    text-align: center;
    // color: var(--ui-text-color);
    // background-color: var(--ui-variant-btn-background-color);
    // border: 1px solid var(--ui-variant-btn-border-color);

    &.el-button+.el-button {
        margin-left: 5px;
    }
}

.jtyj-btn-primary {
    background-color: var(--app-primary-base);
    border: 1px solid var(--app-primary-base);

    &:hover {
        background-color: var(--ui-btn-primary-color-hover);
        border-color: var(--ui-btn-primary-color-hover);
    }
}

.jtyj-button-text {
    color: var(--app-primary-base);

    &.el-button:focus,
    &.el-button:hover {
        color: var(--app-primary-base);
        background-color: transparent;
    }

}

.jtyj-btn-cancel {
    border-radius: 8px;
    color: var(--ui-text-color);
    background-color: transparent;
    border: 1px solid var(--ui-variant-btn-border-color);

    &.el-button:focus,
    &:hover {
        color: var(--ui-text-color);
        background-color: transparent;
        border-color: var(--ui-input-hover-border-color);
    }
}

.jtyj-btn-other {
    border-radius: 8px;
    color: var(--ui-text-color);
    background-color: var(--app-nav-bg);
    border: 1px solid var(--ui-variant-btn-border-color);

    &.el-button:focus,
    &:hover {
        color: var(--ui-text-color);
        background-color: transparent;
        border-color: var(--ui-input-hover-border-color);
    }
}

.el-message-box {
    background-color: var(--ui-component-background);
    border: 1px solid var(--ui-border-color-base);
    border-radius: 8px;

    .el-message-box__title,
    .el-message-box__message p {
        color: var(--ui-text-color);
    }

    .el-message-box__headerbtn:hover .el-message-box__close {
        color: var(--ui-text-color);
    }

}

.el-card {
    position: relative;
    color: var(--ui-text-color);
    font-size: 14px;
    background-color: var(--ui-component-background);
    margin: 0;
    padding: 0;
    list-style: none;

    .el-card__body {
        padding: 48px;
    }
}

.el-tag {
    height: 20px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    // margin-left: 4px;
    padding: 0 4px;
    font-size: 12px;
    color: var(--app-primary-base);
    background-color: var(--app-primary-8);
    border-radius: 6px !important;
    border-color: var(--app-primary-8);
}

.el-radio-group {
    .el-radio-button__inner {
        color: var(--ui-text-color);
        background-color: var(--ui-segmented-bg);
        border: 1px solid var(--ui-border-color-base);
        border-color: var(--ui-border-color-base);

        &:hover,
        &:focus {
            color: var(--app-header-text-color-hover);
        }
    }

}

.el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: var(--app-header-text-color-hover);
    background-color: var(--ui-segmented-selected-bg);
    border: 1px solid var(--ui-border-color-base);
    border-color: var(--ui-border-color-base);
    box-shadow: none;
}

.el-timeline {
    .el-timeline-item__tail {
        border-left: 2px solid var(--ui-border-color-base);
    }

    .el-timeline-item__node {
        background-color: var(--ui-border-color-base);
    }

    .el-timeline-item__timestamp {
        color: var(--ui-breadcrumb-base-color);
    }

    .el-timeline-item__content {
        color: var(--ui-text-color);
    }

    & .el-card .el-card__body {
        padding: 20px;

        p {
            color: var(--ui-breadcrumb-base-color);
        }
    }
}

// jsonschema页面需要单独重写的第三方样式
.jtyj-jsonschema {
    &.el-radio-group {
        .el-radio-button__inner {
            color: var(--ui-text-color);
            background-color: var(--ui-segmented-bg);
            border: 1px solid var(--ui-border-color-base);
            border-color: var(--ui-border-color-base);

            &:hover,
            &:focus {
                color: var(--app-header-text-color-hover);
            }
        }

    }

    & .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        color: var(--app-header-text-color-hover);
        background-color: var(--ui-segmented-selected-bg);
        border: 1px solid var(--ui-border-color-base);
        border-color: var(--ui-border-color-base);
        box-shadow: none;
    }


}

.el-dialog__body {
    color: var(--ui-text-color);
}

.el-dialog__header {
    background-color: #224774;
    padding: 10px;
}

.el-dialog__headerbtn {
    top: 10px;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: #1b3051; //var(--ui-component-background)
}

.el-table th.el-table__cell.is-leaf {
    background-color: #244b7b;
}

.el-tree-node {
    border: 1px solid var(--ui-border-color-base);
    border-radius: 5px;
    margin-bottom: 5px;
}

.el-tree-node__label {
    color: var(--ui-text-color);
}